<template>
    <div class="footer">
        <div class="Suspensionbox">
            <span class="Onlinecustomerservice"  @mouseenter="enter()" @mouseleave="leave()"></span>
        </div>
        <div class="footer-content">
            <div class="footer-left">
                <ul>
                    <li>关于我们</li>
                    <li>公司介绍</li>
                    <li>企业文化</li>
                    <li>加入我们</li>
                </ul>
                <ul>
                    <li>产品中心</li>
                    <li>易出境</li>
                    <li>消费宝</li>
                    <li>万衡商城</li>
                    <li>汇合总控</li>
                </ul>
                <ul>
                    <li>最新资讯</li>              
                    <li>最新动态</li>
                </ul>
                <ul>
                    <li>联系我们</li>
                    <li class="phone">0571-81185617</li>
                    <li>service@joingp.net</li>
                </ul>
            </div>
            <div class="fooetr-right">
                <div>
                    <img src="/images/二维码图片png.png" />
                    <span>关注我们</span>
                </div>
            </div>
        </div>
        <div class="footer-class">
            <p>Copyright 2016 杭州汇合智能科技有限公司 浙ICP备14030516号-1</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'footer',
    data(){
        return{

        }
    },
    methods:{
         enter(){
          
        },
        leave(){
           
        }
    }
}
</script>
<style scoped>
 /*底部样式*/
    .footer{
        display: flex;
        width: 100%;
        height: 384px;
        flex-wrap: wrap;
    }
    .footer-class{
        position: relative;
        width: 1400px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer-class>p{
        color: #b7b7b7;
        font-size: 12px;
    }
    .footer-content{
        position: relative;
        width: 1400px;
        margin: 0 auto;
        display: flex;
        padding: 0;
    }
    .footer-left{
        position: relative;
        width: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .footer-left ul{
        list-style: none;
        color: #47CECF;
        width: 24%;
        padding: 0;
    }
    .footer-left ul li:first-child{
        font-weight: bold;
    }
    .footer-left ul li{
        margin-top: 20px;
        cursor: pointer;
    }
    .footer-left ul li:hover,.footer-left ul li:active{
       color: #219a9b;
    }
    .phone{
        background-image: url("/images/矩形 26.png");
        background-repeat: no-repeat;
        background-position: 100%!important;
        background-size: 20px 20px;
    }
    .fooetr-right{
        display: flex;
        width: 50%;
        justify-content: center;
        flex-wrap: wrap;
        margin-left: auto;
    }
    .fooetr-right>div{
        width: 50%;
        text-align: center;
        margin-left: auto;
        margin-top: 30px;
    }
    .fooetr-right img{
        width: 150px;
        height: 150px;
        text-align: center;
    }
    .fooetr-right span{
        display: block;
        width: 100%;
        text-align: center;
        color: #47CECF;
        font-size: 17.84px;
        height: 40px;
        line-height: 40px;
    }
    /*悬浮框样式*/
    .Suspensionbox{
        position: fixed;
        width: 189px;
        height: 445px;
        right: 0;
        top: 514px;
        z-index: 1000;
        background-image: url("/images/悬浮框.png");
    }
    .Onlinecustomerservice{
        display: block;
        text-align: center;
        width: 140px;
        height: 80px;
        margin-left: 25px;
        margin-top: 140px;
        cursor: pointer;
    }
    /*悬浮框在线客服动画样式*/
    
</style>